<template>
  <el-dialog
    class="commonDialog"
    :title="parentTitle === 1 ? '添加菜品' : '编辑菜品'"
    :visible.sync="visible"
    width="800px"
    :before-close="cancelModule">
    <el-form ref="addMeal" :rules="rules" class="commonForm mt45" :model="addMeal" label-width="40%">
      <el-row style="margin-top:-30px">
        <el-col :span="12" style="margin-left:-50px;">
          <el-form-item label="菜品名称:" prop="CaiClaName" required>
            <el-input class="commonInput" v-model="addMeal.dishesName" :disabled='false'
                      style="heigth:100px"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="菜品类别:" prop="id" required>
            <el-select class="commonSelect" v-model="addMeal.dishesCategoryId" placeholder="炒菜">
              <el-option aria-setsize="mini" :key="index" v-for="(item, index) in cla" :label="item.categoryName"
                         :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" style="margin-left:-50px">
          <el-form-item label="物料:" prop="dishesList" required>
            <el-button type="text" v-model="addMeal.dishesList" @click="selectDishes" style="margin-top:-10px">
              选择物料

              <!-- <SelectDishesList v-show="dialogVis"></SelectDishesList> -->
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" style="margin-left:-50px;margin-top:-8px">
          <el-form-item>
            <el-input v-model="addMeal.message" class="commonInput" type="textarea" :rows="4"
                      style="width:565px"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" style="margin-left:-50px">
          <el-form-item label="菜品净含量:" prop="netContent" required>
            <el-input class="commonInput" v-model="addMeal.netContent"
                      style="width: 100px;margin-right:5px;"></el-input>
            /份
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="价格:" prop="price" required>
            <el-input class="commonInput" v-model="addMeal.price" style="width: 198px;"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" style="margin-left:-50px;margin-top:5px">
          <el-form-item label="菜品图片:">
            <div class="uploadImg">
              <el-upload class="avatar-uploader" action="http://fuguapi.free.idcfengye.com/api/Facility/FacilityUpload"
                         :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar"/>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item class="btnsLine mt60">
        <el-button class="commonButton" @click="cancelModule(false)">取消</el-button>
        <el-button class="commonButton" @click="submitForm" v-if="parentTitle === 1">确定</el-button>
        <el-button class="commonButton" @click.prevent="submitEditForm('addMeal')" v-if="parentTitle === 2">确定
        </el-button>
      </el-form-item>
    </el-form>
    <SelectDishesList v-if="dialogVis" v-on:closeParentModule="closeModule"
                      v-on:parentSelectNutrients="selectNutrients"></SelectDishesList>
  </el-dialog>
</template>

<script>
  import axios from 'axios';
  import SelectDishesList from '@/views/dishManagement/components/addClass/selectDishesList.vue';

  export default {
    props: ['parentDialogVisible', 'getParentTableData', 'parentTitle', 'parentCurrentMeal'],
    data() {
      return {
        urlPrev: 'http://39.106.7.166:8011',
        visible: false,
        cla: [],
        urlCla: 'http://39.106.7.166:8097/',
        imageUrl: '',       //上传图片url
        imageAddress: '',   //上传图片地址
        dialogVis: false,   //物料窗口控制
        addMeal: {
          restaurantId: 0,
          dishesName: '',
          netContent: 0,
          price: 0,
          remark: '',
          dishesPictures: '',
          dishesCategoryId: 0,
          dishesList: [
            {
              id: 0,
              suttle: 0,
            },
          ],
        },
        rules: {
          dishesName: [
            { required: true, message: '请输入菜品名称', trigger: 'blur' },
          ],
          dishesCategoryId: [
            { required: true, message: '请输入菜品类别', trigger: 'blur' },
          ],
          dishesList: [
            { required: true, message: '请先选择物料', trigger: 'blur' },
          ],
          netContent: [
            { required: true, message: '请输入菜品净含量', trigger: 'blur' },
          ],
          price: [
            { required: true, message: '请输入价格', trigger: 'blur' },
          ],
        },
        conditionForm: {    //获取菜品类别的参数
          pageIndex: 1,
          pageSize: 10000,
        },
      };
    },
    mounted() {
      this.getTerpineCla();
      this.visible = true;
      if (this.parentTitle === 2) {
        this.initFormData();
      }
    },
    methods: {
      // 添加菜品
      submitForm() {
        const url = this.urlPrev + `/api/VarietyOfDishes/VarietyOfDishesSave`;
        axios({ method: 'post', url: url, data: this.addMeal })
          .then(rsp => {
            if (rsp.data.status == 1) {
              this.$message({
                message: '添加成功',
                type: 'success',
              });
            } else {
              this.$message({
                message: '添加失败',
                type: 'error',
              });
            }
          })
          .catch(err => console.log(err));
      },
      //关闭弹框
      closeDialog(val) {
        this.$emit('cancelModule', val);
      },

      closeModule(val) {
        this.dialogVis = val;
      },
      selectNutrients(arr) {
        console.log(arr)
        arr.forEach((item,index)=>{
          this.addMeal.dishesList[index].id = item.id;
          this.addMeal.dishesList[index].suttle = Number(item.materialStatus);
        })

      },
      //选择物料
      selectDishes() {
        this.dialogVis = true;
      },
      //获取图片
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        this.$emit('imageAddress', this.imageUrl);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      // 获取菜品类别
      getTerpineCla() {
        const url = this.urlCla + `api/bddishescategory/getdishescategory`;
        axios({ method: 'post', url: url, data: this.conditionForm })
          .then(res => {
            this.cla = res.data.result;
          });
      },
      // 编辑初始化表单
      initFormData() {
        this.addMeal = this.parentCurrentMeal;
      },
      //关闭弹框
      cancelModule(val) {
        this.$emit('cancelModule', val);
      },
    },
    components: {
      SelectDishesList,
    },

  };
</script>
<style lang="scss" scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
